<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>会员充值</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" media="all">
    <style>
        .form-content {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="form-content">
                    <form class="layui-form" lay-filter="rechargeForm">
                        <input type="hidden" name="id" value="<?= $member->id ?>">
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">会员卡号</label>
                            <div class="layui-input-block">
                                <input type="text" value="<?= $member->card_no ?>" class="layui-input" readonly>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">会员姓名</label>
                            <div class="layui-input-block">
                                <input type="text" value="<?= $member->name ?>" class="layui-input" readonly>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">当前余额</label>
                            <div class="layui-input-block">
                                <input type="text" value="<?= $member->balance ?>" class="layui-input" readonly>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">充值金额</label>
                            <div class="layui-input-block">
                                <input type="number" name="amount" required lay-verify="required|number" placeholder="请输入充值金额" class="layui-input">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">赠送金额</label>
                            <div class="layui-input-block">
                                <input type="number" name="give_amount" value="0" class="layui-input">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">支付方式</label>
                            <div class="layui-input-block">
                                <select name="payment_method" required lay-verify="required">
                                    <option value="">请选择支付方式</option>
                                    <option value="1">现金</option>
                                    <option value="2">微信</option>
                                    <option value="3">支付宝</option>
                                    <option value="4">银行卡</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-block">
                                <textarea name="remark" placeholder="请输入备注" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="rechargeForm">立即充值</button>
                                <button type="button" class="layui-btn layui-btn-primary" onclick="closeLayer()">关闭</button>
                            </div>
                        </div>
                    </form>
                </div>

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>充值记录</legend>
                </fieldset>

                <table id="rechargeLog" lay-filter="rechargeLog"></table>
            </div>
        </div>
    </div>


    <script src="/app/admin/component/layui/layui.js"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script>
    layui.use(['table', 'form', 'layer'], function(){
        var $ = layui.$
        ,table = layui.table
        ,form = layui.form
        ,layer = layui.layer;
        
        // 加载会员列表
        $.get('/app/ky_shouyin/admin/member/list', function(res){
            if(res.code === 0){
                var html = '<option value="">请选择会员</option>';
                layui.each(res.data, function(index, item){
                    html += '<option value="'+ item.id +'">'+ item.name +' ('+ item.phone +')</option>';
                });
                $('select[name="member_id"]').html(html);
                form.render('select');
            }
        });
        
        // 充值记录列表
        table.render({
            elem: '#rechargeLog',
            filter: 'rechargeLog',
            url: '/app/ky_shouyin/admin/member/rechargeLog',
            where: {
                member_id: <?= $member->id ?> // 添加会员ID作为查询条件
            },
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'member_name', title: '会员姓名', width: 100},
                {field: 'member_phone', title: '手机号', width: 120},
                {field: 'amount', title: '充值金额', width: 100},
                {field: 'modified_amount', title: '修正金额', width: 100, templet: function(d){
                    return d.modified_amount ? ('<span style="color: #ff5722;">'+d.modified_amount+'</span>') : '-';
                }},
                {field: 'payment_method', title: '支付方式', width: 100, templet: function(d){
                    var methods = {1:'现金', 2:'微信', 3:'支付宝',4:'银行卡'};
                    return methods[d.payment_method] || '';
                }},
                {field: 'store_name', title: '门店', width: 120},
                {field: 'created_at', title: '充值时间', width: 160},
                {field: 'modify_time', title: '修正时间', width: 160, templet: function(d){
                    return d.modify_time || '-';
                }},
                {field: 'modify_reason', title: '修正原因', width: 200},
                {title: '操作', width: 120, templet: function(d){
                    if(!d.modified_amount) {
                        return '<a class="layui-btn layui-btn-xs" lay-event="modify">修正</a>';
                    }
                    return '<span class="layui-text">已修正</span>';
                }}
            ]],
            page: true,
            limit: 15,
            text: {
                none: '暂无数据'
            }
        });
        
        //监听提交
        form.on('submit(rechargeForm)', function(data){
            $.ajax({
                url: '/app/ky_shouyin/admin/member/recharge'
                ,type: 'POST'
                ,data: data.field
                ,success: function(res){
                    if(res.code === 0){
                        layer.msg('充值成功', {
                            icon: 1
                            ,time: 1000
                        }, function(){
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.layui.table.reload('LAY-member-list');
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }
            });
            return false;
        });

        window.closeLayer = function(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        }

        // 监听工具条事件
        table.on('tool(rechargeLog)', function(obj){
            var data = obj.data;
            if(obj.event === 'modify'){
                layer.open({
                    type: 1
                    ,title: '修正充值金额'
                    ,area: ['500px', '400px']
                    ,content: `
                        <div class="layui-form" lay-filter="modifyForm" style="padding: 20px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">原充值金额</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" disabled value="${data.amount}">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">修正金额</label>
                                <div class="layui-input-block">
                                    <input type="number" name="modified_amount" required lay-verify="required" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">修正原因</label>
                                <div class="layui-input-block">
                                    <textarea name="modify_reason" required lay-verify="required" class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="modifySubmit">确认修正</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </div>
                    `
                    ,success: function(){
                        form.render(null, 'modifyForm');
                        
                        // 监听提交
                        form.on('submit(modifySubmit)', function(formData){
                            // 验证修正金额
                            var modifiedAmount = parseFloat(formData.field.modified_amount);
                            var originalAmount = parseFloat(data.amount);
                            
                            if (isNaN(modifiedAmount) || modifiedAmount <= 0) {
                                layer.msg('请输入有效的修正金额', {icon: 2});
                                return false;
                            }
                            
                            // 添加充值记录ID
                            formData.field.recharge_id = data.id;
                            
                            $.ajax({
                                url: '/app/ky_shouyin/admin/member/modifyRecharge'
                                ,type: 'POST'
                                ,data: formData.field
                                ,dataType: 'json'
                                ,success: function(res){
                                    if(res.code === 0){
                                        layer.closeAll();
                                        layer.msg('修正成功');
                                        table.reload('rechargeLog');
                                    } else {
                                        layer.msg(res.msg || '修正失败', {icon: 2});
                                    }
                                },
                                error: function(xhr, status, error) {
                                    layer.msg('请求失败：' + error, {icon: 2});
                                }
                            });
                            return false;
                        });
                    }
                });
            }
        });
    });
    </script>
</body>
</html> 